<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="company" label="分公司" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="number" label="工号" />
      <el-table-column prop="group" label="比武组别" />
      <el-table-column prop="category" label="比武类别" />
      <el-table-column prop="works" label="参赛作品名称" />
      <el-table-column label="个人海报">
        <template #default="scope">
          <el-image
            :src="scope.row.personalUrl"
            alt="个人海报"
            style="width: 100px; height: 100px"
            :preview-src-list="[scope.row.personalUrl]"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column label="比武照片" :min-width="120">
        <template #default="scope">
          <div
            style="
              display: flex;
              row-gap: 5px;
              flex-direction: column;
              width: 100px;
              margin: 0 auto;
            "
          >
            <el-image
              :src="scope.row.raceUrl"
              alt="比武照片"
              style="width: 100px; height: 100px"
              :preview-src-list="[scope.row.raceUrl]"
              :preview-teleported="true"
            />
            <el-button type="danger" width="100px" @click="handleDelete(scope.row.id)" size="small"
              >删除图片</el-button
            >
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="类型">
        <template #default="scope">
          {{ scope.row.status === 1 ? '报名' : '打卡' }}
        </template>
      </el-table-column>

      <el-table-column prop="updatedRaceAt" label="时间">
        <template #default="scope">
          {{ new Date(scope.row.updatedRaceAt).toLocaleString() }}
        </template>
      </el-table-column>
    </el-table>
    <el-divider />
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-if="total > 0"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 50]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        background
      />
    </el-config-provider>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const loading = ref(false)
const tableData = ref([])
const searchForm = ref({})
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const fetchData = async () => {
  loading.value = true
  try {
    const response = await axios.get('/chunleibei/api/user/apply', {
      params: {
        ...searchForm.value,
        pageNo: currentPage.value,
        pageSize: pageSize.value
      }
    })
    tableData.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    ElMessage.error('数据加载失败，请重试！')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const handlePageChange = (newPage) => {
  currentPage.value = newPage
  fetchData()
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  fetchData()
}

const handleDelete = async (id) => {
  // 确认是否删除
  await ElMessageBox.confirm('是否确认删除该图片？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await axios.delete(`/chunleibei/api/user/${id}/race`)
  ElMessage.success('删除成功')
  await fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped></style>
